<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹钢琴</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div {
        margin: 100px 250px;
        overflow: hidden;
    }

    ul li {
        float: left;
        width: 100px;
        height: 400px;
        border-right: 1px solid #555;
        position: relative;
        /* background-image: linear-gradient(#fff 40%, #000); */
    }

    ul li span {
        width: 50px;
        height: 200px;
        background: #000;
        position: absolute;
        top: 0;
        left: 75px;
        z-index: 22;
    }

    ul li:nth-child(1) {
        border-left: 1px solid #ccc;
    }

    ul li:nth-child(3) span {
        display: none;
    }

    ul li:nth-child(7) span {
        display: none;
    }

    ul li:nth-child(9) {
        border-right: 1px solid #ccc;
    }

    ul li:nth-child(9) span {
        border-right: 1px solid #ccc;
        width: 26px;
    }

    h3,
    h4,
    h5 {
        margin: 0 300px;
    }
</style>

<body>
    <!-- 第一种方法
    /22222222222222222222222 -->
    <audio src="imgs/doremi/d1.mp3"></audio>
    <audio src="imgs/doremi/d2.mp3"></audio>
    <audio src="imgs/doremi/d3.mp3"></audio>
    <audio src="imgs/doremi/d4.mp3"></audio>
    <audio src="imgs/doremi/d5.mp3"></audio>
    <audio src="imgs/doremi/d6.mp3"></audio>
    <audio src="imgs/doremi/d7.mp3"></audio>
    <audio src="imgs/doremi/d8.mp3"></audio>
    <audio src="imgs/doremi/d9.mp3"></audio>

    <!-- 第二种方法 -->
    <!-- <audio autoplay>
        <source src="imgs/doremi/d1.mp3" type="audio/mpeg">
    </audio> -->
    <h4>友情提示:A/1 : do ,S/2 : re ,D/3 : mi ,F/4 : fa ,G/5 : so ,H/6 : la ,J/7 : xi ,K/8 : do+ ,L/9 : re+</h4>
    <h3>两只老虎简谱</h3>
    <h5>1231 / 1231 / 345~ / 345~ / 565431 / 565431 / 15-1~ / 15-1~</h5>
    <div>
        <ul>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>
            <li>

                <span></span>
            </li>

        </ul>
    </div>

    <script>
        var data = [
            "imgs/doremi/d1.mp3",
            "imgs/doremi/d2.mp3",
            "imgs/doremi/d3.mp3",
            "imgs/doremi/d4.mp3",
            "imgs/doremi/d5.mp3",
            "imgs/doremi/d6.mp3",
            "imgs/doremi/d7.mp3",
            "imgs/doremi/d8.mp3",
            "imgs/doremi/d9.mp3"
        ]

        var aus = document.querySelectorAll('audio')   // 11111
        var au = document.querySelector('audio')
        var lis = document.querySelectorAll('li')


        // 第一种 方法 11111111111
        // for (var i = 0; i < data.length; i++) {
        //     // 为了解决 异步问题 形成块状 作用域 传入i值
        //     // 还可以 var  ====>>>  let
        //     // 特可以用  try{ throw(i) }catch(i){}
        //     (function (i) {
        //         lis[i].onmousedown = function (e) {

        //             this.style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //             // console.log(i);
        //             // console.log(data[j]);
        //             aus[i].play();
        //         }
        //     })(i)
        // }

        // 222222222222222222
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)

            lis[i].onmousedown = function (e) {
                var idx = this.getAttribute('index')
                this.style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
                // console.log(i);
                // console.log(data[j]);
                aus[idx].load();   // 预加载
                aus[idx].play();
            }
            lis[i].onmouseup = function () {
                this.style.backgroundImage = ''
            }
            lis[i].onmouseleave = function () {
                this.style.backgroundImage = ''
            }

        }

        // 333333333333333333
        // for (var i = 0; i < data.length; i++) {
        //     // 为了解决 异步问题 形成块状 作用域 传入i值
        //     // 还可以 var  ====>>>  let
        //     // 特可以用  try{ throw(i) }catch(i){}
        //     (function (i) {
        //         lis[i].onmousedown = function (e) {

        //             this.style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //             // console.log(i);
        //             // console.log(data[j]);
        //             au.src = data[i]
        //         }

        //     })(i)

        //     lis[i].onmouseup = function () {
        //         this.style.backgroundImage = ''
        //     }
        //     lis[i].onmouseleave = function () {
        //         this.style.backgroundImage = ''
        //     }
        // }


        //
        document.onkeydown = function (e) {
            console.log(e.keyCode);
            if (e.keyCode == 65 || e.keyCode == 97 || e.keyCode == 49) {
                aus[0].load();
                aus[0].play();
                lis[0].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 83 || e.keyCode == 98 || e.keyCode == 50) {
                aus[1].load();
                aus[1].play();
                lis[1].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 68 || e.keyCode == 99 || e.keyCode == 51) {
                aus[2].load();
                aus[2].play();                
                lis[2].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 70 || e.keyCode == 100 || e.keyCode == 52) {
                aus[3].load();
                aus[3].play();
                lis[3].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 71 || e.keyCode == 101 || e.keyCode == 53) {
                aus[4].load();
                aus[4].play();
                lis[4].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 72 || e.keyCode == 102 || e.keyCode == 54) {
                aus[5].load();
                aus[5].play();
                lis[5].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 74 || e.keyCode == 103 || e.keyCode == 55) {
                aus[6].load();
                aus[6].play();
                lis[6].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 75 || e.keyCode == 104 || e.keyCode == 56) {
                aus[7].load();
                aus[7].play();
                lis[7].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            } else if (e.keyCode == 76 || e.keyCode == 105 || e.keyCode == 57) {
                aus[8].load();
                aus[8].play();
                lis[8].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
            }
        }
        document.onkeyup = function (e) {
            console.log(e.keyCode);
            if (e.keyCode == 65 || e.keyCode == 97 || e.keyCode == 49) {
                // au.src = data[0]
                lis[0].style.backgroundImage = ''
            } else if (e.keyCode == 83 || e.keyCode == 98 || e.keyCode == 50) {
                // au.src = data[1]
                lis[1].style.backgroundImage = ''
            } else if (e.keyCode == 68 || e.keyCode == 99 || e.keyCode == 51) {
                // au.src = data[2]
                lis[2].style.backgroundImage = ''
            } else if (e.keyCode == 70 || e.keyCode == 100 || e.keyCode == 52) {
                // au.src = data[3]
                lis[3].style.backgroundImage = ''
            } else if (e.keyCode == 71 || e.keyCode == 101 || e.keyCode == 53) {
                // au.src = data[4]
                lis[4].style.backgroundImage = ''
            } else if (e.keyCode == 72 || e.keyCode == 102 || e.keyCode == 54) {
                // au.src = data[5]
                lis[5].style.backgroundImage = ''
            } else if (e.keyCode == 74 || e.keyCode == 103 || e.keyCode == 55) {
                // au.src = data[6]
                lis[6].style.backgroundImage = ''
            } else if (e.keyCode == 75 || e.keyCode == 104 || e.keyCode == 56) {
                // au.src = data[7]
                lis[7].style.backgroundImage = ''
            } else if (e.keyCode == 76 || e.keyCode == 105 || e.keyCode == 57) {
                // au.src = data[8]
                lis[8].style.backgroundImage = ''
            }
        } 


        // 绑定键盘   3333333333333333333333333333
        // document.onkeydown = function (e) {
        //     console.log(e.keyCode);
        //     if (e.keyCode == 65 || e.keyCode == 97 || e.keyCode == 49) {
        //         au.src = data[0]
        //         lis[0].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 83 || e.keyCode == 98 || e.keyCode == 50) {
        //         au.src = data[1]
        //         lis[1].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 68 || e.keyCode == 99 || e.keyCode == 51) {
        //         au.src = data[2]
        //         lis[2].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 70 || e.keyCode == 100 || e.keyCode == 52) {
        //         au.src = data[3]
        //         lis[3].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 71 || e.keyCode == 101 || e.keyCode == 53) {
        //         au.src = data[4]
        //         lis[4].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 72 || e.keyCode == 102 || e.keyCode == 54) {
        //         au.src = data[5]
        //         lis[5].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 74 || e.keyCode == 103 || e.keyCode == 55) {
        //         au.src = data[6]
        //         lis[6].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 75 || e.keyCode == 104 || e.keyCode == 56) {
        //         au.src = data[7]
        //         lis[7].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     } else if (e.keyCode == 76 || e.keyCode == 105 || e.keyCode == 57) {
        //         au.src = data[8]
        //         lis[8].style.backgroundImage = 'linear-gradient(#fff 40%, #000)'
        //     }
        // }
        // document.onkeyup = function (e) {
        //     console.log(e.keyCode);
        //     if (e.keyCode == 65 || e.keyCode == 97 || e.keyCode == 49) {
        //         // au.src = data[0]
        //         lis[0].style.backgroundImage = ''
        //     } else if (e.keyCode == 83 || e.keyCode == 98 || e.keyCode == 50) {
        //         // au.src = data[1]
        //         lis[1].style.backgroundImage = ''
        //     } else if (e.keyCode == 68 || e.keyCode == 99 || e.keyCode == 51) {
        //         // au.src = data[2]
        //         lis[2].style.backgroundImage = ''
        //     } else if (e.keyCode == 70 || e.keyCode == 100 || e.keyCode == 52) {
        //         // au.src = data[3]
        //         lis[3].style.backgroundImage = ''
        //     } else if (e.keyCode == 71 || e.keyCode == 101 || e.keyCode == 53) {
        //         // au.src = data[4]
        //         lis[4].style.backgroundImage = ''
        //     } else if (e.keyCode == 72 || e.keyCode == 102 || e.keyCode == 54) {
        //         // au.src = data[5]
        //         lis[5].style.backgroundImage = ''
        //     } else if (e.keyCode == 74 || e.keyCode == 103 || e.keyCode == 55) {
        //         // au.src = data[6]
        //         lis[6].style.backgroundImage = ''
        //     } else if (e.keyCode == 75 || e.keyCode == 104 || e.keyCode == 56) {
        //         // au.src = data[7]
        //         lis[7].style.backgroundImage = ''
        //     } else if (e.keyCode == 76 || e.keyCode == 105 || e.keyCode == 57) {
        //         // au.src = data[8]
        //         lis[8].style.backgroundImage = ''
        //     }
        // } 
    </script>
</body>

</html>
<!-- 65
     83
     68
     70
     71
     72
     74
     75
     76 -->